<template>
    <div class="hello">
      <ticket-head :region_n="HallName"></ticket-head>
      <!-- {{HallName}} -->
      <seat-area>
        <template slot="seat-area-solt">
          <div class="seatBox" >
            <div class="row zw_block">
              <div class="column row_name" style="flex-grow:1">
                <template v-for="(seatInfo, k) in seatList">
                  <div :key="k">{{k+1}}</div>
                </template>
              </div>
              <div class="column_c" style="flex-grow:9">
                <div class="stage_direc">舞台方向</div>
                <div v-for="(seatInfo, k) in seatList" class="row" :key="k">
                  <template v-for="(seatItem, i) in seatInfo">
                    <div class="seatClass" @click="clickSeat(i,seatItem.pai)" :key="seatItem.id" :style="{height:height +'rem',width:width +'rem'}"
                    >
                      <img class="seatImgClass" :seatId="seatItem.id" :seatIndex="i" :src="seatItem.nowIcon"/>
                    </div>
                  </template>
                </div>
              </div>
            </div>
          </div>
        </template>
      </seat-area>
      <confirm-buy :propSelectedSeat="selectedSeatList" @delete="deleteSeats"></confirm-buy>
    </div>
</template>

<script>
/* eslint-disable */
import TicketHead from './components/TicketHead'
import SeatArea from './components/SeatArea'
import ConfirmBuy from './components/ConfirmBuy'
import { getInfo } from '@/api/data'
import { Toast } from 'vant'
export default {
  name: 'HallSeat',
  components: {
    TicketHead,
    SeatArea,
    ConfirmBuy,
    [Toast.name]: Toast
  },
  props: {
    HallN: ''
  },
  data () {
    return {
      seatList: [],
      width: 0.32,
      height: 0.28,
      selectedSeatList: [],
      seatTypeList: [
        {
            name: "未选",
            type: "0",
            seats: 1,
            icon: "static/choose_w.png",
            isShow: "1"
        },
        {
            name: "选中",
            type: "1",
            seats: 1,
            icon: "static/choosed.png",
            isShow: "1"
        },
        {
            name: "不可选",
            type: "2",
            seats: 1,
            icon: "static/choose_no.png",
            isShow: "1"
        }
      ],
      maxSelect: null,
      HallName: null
    }
  },
  computed: {
    seatScale: function () {
      return ''
    }
  },
  watch: {
    HallN: function (newVal, oldVal) {
      this.HallName = newVal
      this.selectedSeatList = []
      this.loadData()
    }
  },
  methods: {
    loadData: function () {
      // const params = {
      //   qu: 'A'
      // }
      // getInfo(params).then(res => {
      //   console.log(res.data)
      // }).catch(err => {
      //   console.log(err)
      // })
      this.$axios.get('http://hytest.xihabang.com/api/ticket_api.php?do=seat',{params:{qu:this.HallName}}).then(res => {
        let seatItems = res.data.data
        console.log(seatItems)
        if (!seatItems) {
          return
        }else{
        seatItems.forEach(element => {
          element.forEach(e => {
            for (const item of this.seatTypeList) {
              // if (e.status === item.type) {
              //   e.nowIcon = item.icon
              //   e.defautIcon = item.icon
              // }
              if (e.status === '1') {
                e.nowIcon = this.seatTypeList[0].icon
                e.wIcon = this.seatTypeList[0].icon
              }
              if (e.status === '6') {
                e.selectedIcon = this.seatTypeList[1].icon
              }
              if (e.status === '2' || e.status === '3'||e.status === '4' || e.status === '5' || e.status === '6') {
                e.nowIcon = this.seatTypeList[2].icon
                e.unIcon = this.seatTypeList[2].icon
              }
            }
            // 如果座位是不可选 加入属性canClick 判断座位是否可以点击
            if (e.status === '2' || e.status === '3'||e.status === '4' || e.status === '5' || e.status === '6') {
              e.canClick = false
            } else {
              e.canClick = true
            }
          })
        })
        }
        this.seatList = seatItems
      }).catch(function (error) {
        console.log(error)
      })
    },
    clickSeat (index, r) {
      const rowId = parseInt(r) - 1
      let nowC = this.seatList[rowId][index]
      if (nowC.canClick) {
        if (nowC.nowIcon === nowC.wIcon) {
          if (this.selectedSeatList.length >= this.maxSelect) {
            Toast('最多可选' + this.maxSelect + '个座位')
            return
          }
          this.$set(nowC, 'nowIcon', 'static/choosed.png')
          this.selectedSeatList.push(nowC)
        } else {
          this.$set(nowC, 'nowIcon', 'static/choose_w.png')
          for (const key in this.selectedSeatList) {
            if (this.selectedSeatList[key].id === nowC.id) {
              this.selectedSeatList.splice(key, 1)
            }
          }
        }
      }
    },
    deleteSeats (i) {
      for (const key in this.selectedSeatList) {
        if (this.selectedSeatList[key].id === i.id) {
          this.selectedSeatList.splice(key, 1)
        }
      }
      for (const key in this.seatList[i.pai-1]) {
        if (this.seatList[i.pai-1][key].id === i.id) {
          this.$set(this.seatList[i.pai-1][key], 'nowIcon', 'static/choose_w.png')
        }
      }
      console.log(i)
    }
  },
  mounted () {
    this.HallName = this.$route.params.HallN
    this.loadData()
    let yn = localStorage.getItem('yn_member')
    if (yn) {
      if (yn == 1) {
        this.maxSelect = 2
        console.log(this.maxSelect)
      } else {
        this.maxSelect = 1
      }
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
.seatBox{
  width: 10rem;
  overflow-x: scroll;
  .row_name{
    margin-top:0.68rem;
    div{
      width: 0.44rem;
      height: 0.4rem;
      text-align: center;
      line-height: 0.4rem;
      font-size: 0.3rem;
      color: #434343;
    }
  }
  .seatClass{
    margin: 0.06rem;
    .seatImgClass{
      width:100%;
      height: 100%;
      display: block;
    }
  }
}
</style>
